//
//  HeartrateDetailView.swift
//  Kosspot
//
//  Created by 李鑫 on 2025/7/29.
//

import SwiftUI

struct SleepQualityDetailView: View {
    @State private var selectedDate: Date = Date()
    @State private var sleepData: [SleepQualityData] = {
            let calendar = Calendar.current
            let now = Date()
            return [
                SleepQualityData(date: calendar.date(bySettingHour: 21, minute: 30, second: 0, of: now)!, qualityScore: 10),
                SleepQualityData(date: calendar.date(bySettingHour: 22, minute: 00, second: 0, of: now)!, qualityScore: 20),
                SleepQualityData(date: calendar.date(bySettingHour: 23, minute: 00, second: 0, of: now)!, qualityScore: 15),
                SleepQualityData(date: calendar.date(bySettingHour: 00, minute: 00, second: 0, of: now)!, qualityScore: 25),
                SleepQualityData(date: calendar.date(bySettingHour: 01, minute: 00, second: 0, of: now)!, qualityScore: 30),
                SleepQualityData(date: calendar.date(bySettingHour: 02, minute: 00, second: 0, of: now)!, qualityScore: 60),
                SleepQualityData(date: calendar.date(bySettingHour: 03, minute: 00, second: 0, of: now)!, qualityScore: 80),
                SleepQualityData(date: calendar.date(bySettingHour: 04, minute: 00, second: 0, of: now)!, qualityScore: 60),
                SleepQualityData(date: calendar.date(bySettingHour: 05, minute: 00, second: 0, of: now)!, qualityScore: 50),
                SleepQualityData(date: calendar.date(bySettingHour: 06, minute: 00, second: 0, of: now)!, qualityScore: 10),
            ]
        }()
    
    
    var body: some View {
        VStack {
            CustomNavigationBar(rightImageName: nil, title: "睡眠") {}
            HStack {
                WeekdayPicker(backGroundColor: Color(hex: "#8070F1")) { Date in
                    print(Date)
                    selectedDate = Date
                }
                Image("日历 1")
                    .resizable()
                    .frame(width: 20,height: 20)
                    .onTapGesture {
                        
                    }
            }
            .padding(.horizontal,12)
            ScrollView (.vertical,showsIndicators: false) {
                VStack {
                    HStack {
                        Text("4月8日 21:53")
                            .font(.system(size: 14))
                            .foregroundStyle(Color(hex: "#B2B2B2"))
                        Spacer()
                    }
                    .padding(.leading,16)
                    .padding(.top,16)
                    
                    Spacer().frame(height: 12)
                    HStack {
                        Text("上次测量时间:")
                            .font(.system(size: 12))
                            .foregroundStyle(Color(hex: "#B2B2B2"))
                        Spacer()
                    }
                    .padding(.leading,16)
                    Spacer().frame(height: 6)
                    HStack(spacing: 4) {
                        Text("9")
                            .font(.system(size: 24))
                            .foregroundStyle(Color(hex: "#FFFFFF"))
                        Text("小时")
                            .font(.system(size: 14))
                            .foregroundStyle(Color(hex: "#FFFFFF"))
                        Text("40")
                            .font(.system(size: 24))
                            .foregroundStyle(Color(hex: "#FFFFFF"))
                        Text("分钟")
                            .font(.system(size: 14))
                            .foregroundStyle(Color(hex: "#FFFFFF"))
                        Spacer()
                    }
                    .padding(.leading,16)
                    .padding(.top,6)
                    
                    SleepQualityChartView(data: sleepData)
                                    .padding(.horizontal,27)
                                    .padding(.bottom,16)
                    
                }
                .background(Color(hex: "#1E1E1E"))
                .cornerRadius(16, corners:[.topLeft,.topRight,.bottomLeft,.bottomRight])
                .padding(.horizontal,12)
                
                
                VStack {
                    HStack {
                        Text("睡眠分析")
                            .font(.system(size: 18))
                            .foregroundStyle(Color(hex: "#FFFFFF"))
                        Spacer()
                    }
                    .frame(height: 18)
                    .padding(.leading,20)
                    .padding(.top,20)
                    HStack {
                        Text("睡眠质量评分")
                            .font(.system(size: 18))
                            .foregroundStyle(Color(hex: "#FFFFFF"))
                        Spacer()
                        Text("有待提高")
                            .font(.system(size: 16))
                            .foregroundStyle(Color(hex: "#E6E6E6"))
                    }
                    .frame(height: 16)
                    .padding(.horizontal,20)
                    .padding(.top,16)
                    SegmentedProgressBar(segments: [
                        (value: 25, color: Color(hex: "#E2DCFE")),
                        (value: 25, color: Color(hex: "#AC8FFF")),
                        (value: 25, color: Color(hex: "#8170FF")),
                        (value: 25, color: Color(hex: "#6129FF"))
                    ], currentValue: 23, showWord: ["有待提高","中","良","优"])
                        .padding(.horizontal,20)
                        .padding(.top,20)
                    HStack {
                        VStack {
                            HStack {
                                Rectangle()
                                    .frame(width: 5,height: 16)
                                    .foregroundColor(Color(hex: "#6129FF"))
                                    .cornerRadius(2)
                                Text("深睡")
                                    .font(.system(size: 16))
                                    .foregroundStyle(.white)
                                Spacer()
                            }
                            Spacer().frame(height: 12)
                            HStack {
                                Text("30%")
                                    .font(.system(size: 20))
                                    .foregroundStyle(.white)
                                Spacer()
                            }
                            Spacer().frame(height: 8)
                            HStack(spacing: 4){
                                Text("9")
                                    .font(.system(size: 18))
                                    .foregroundStyle(.white)
                                Text("小时")
                                    .font(.system(size: 12))
                                    .foregroundStyle(.white)
                                Text("40")
                                    .font(.system(size: 18))
                                    .foregroundStyle(.white)
                                Text("分钟")
                                    .font(.system(size: 12))
                                    .foregroundStyle(.white)
                                Spacer()
                            }
                        }
                        Spacer()
                        VStack {
                            HStack {
                                Rectangle()
                                    .frame(width: 5,height: 16)
                                    .foregroundColor(Color(hex: "#8170FF"))
                                    .cornerRadius(2)
                                Text("浅睡")
                                    .font(.system(size: 16))
                                    .foregroundStyle(.white)
                                Spacer()
                            }
                            Spacer().frame(height: 12)
                            HStack {
                                Text("30%")
                                    .font(.system(size: 20))
                                    .foregroundStyle(.white)
                                Spacer()
                            }
                            Spacer().frame(height: 8)
                            HStack(spacing: 4) {
                                Text("9")
                                    .font(.system(size: 18))
                                    .foregroundStyle(.white)
                                Text("小时")
                                    .font(.system(size: 12))
                                    .foregroundStyle(.white)
                                Text("40")
                                    .font(.system(size: 18))
                                    .foregroundStyle(.white)
                                Text("分钟")
                                    .font(.system(size: 12))
                                    .foregroundStyle(.white)
                                Spacer()
                            }
                        }
                        .padding(.leading,30)
                    }
                    .padding(.horizontal,20)
                    Spacer().frame(height: 30)
                    HStack{
                        VStack {
                            HStack {
                                Rectangle()
                                    .frame(width: 5,height: 16)
                                    .foregroundColor(Color(hex: "#AC8FFF"))
                                    .cornerRadius(2)
                                Text("快速眼动")
                                    .font(.system(size: 16))
                                    .foregroundStyle(.white)
                                Spacer()
                            }
                            Spacer().frame(height: 12)
                            HStack {
                                Text("30%")
                                    .font(.system(size: 20))
                                    .foregroundStyle(.white)
                                Spacer()
                            }
                            Spacer().frame(height: 8)
                            HStack(spacing: 4) {
                                Text("9")
                                    .font(.system(size: 18))
                                    .foregroundStyle(.white)
                                Text("小时")
                                    .font(.system(size: 12))
                                    .foregroundStyle(.white)
                                Text("40")
                                    .font(.system(size: 18))
                                    .foregroundStyle(.white)
                                Text("分钟")
                                    .font(.system(size: 12))
                                    .foregroundStyle(.white)
                                Spacer()
                            }
                        }
                        Spacer()
                        VStack {
                            HStack {
                                Rectangle()
                                    .frame(width: 5,height: 16)
                                    .foregroundColor(Color(hex: "#E2DCFE"))
                                    .cornerRadius(2)
                                Text("清醒")
                                    .font(.system(size: 16))
                                    .foregroundStyle(.white)
                                Spacer()
                            }
                            Spacer().frame(height: 12)
                            HStack {
                                Text("30%")
                                    .font(.system(size: 20))
                                    .foregroundStyle(.white)
                                Spacer()
                            }
                            Spacer().frame(height: 8)
                            HStack(spacing: 4) {
                                Text("9")
                                    .font(.system(size: 18))
                                    .foregroundStyle(.white)
                                Text("小时")
                                    .font(.system(size: 12))
                                    .foregroundStyle(.white)
                                Text("40")
                                    .font(.system(size: 18))
                                    .foregroundStyle(.white)
                                Text("分钟")
                                    .font(.system(size: 12))
                                    .foregroundStyle(.white)
                                Spacer()
                            }
                        }.padding(.leading,30)
                    }
                    .padding(.horizontal,20)

                    Spacer().frame(height: 24)
                    VStack {
                        HStack {
                            Image("wenhao")
                                .resizable()
                                .frame(width: 16,height: 16)
                            Text("了解睡眠质量评分")
                                .font(.system(size: 16))
                                .foregroundStyle(.white)
                            Spacer()
                        }
                        Spacer().frame(height: 12)
                        Text("睡眠质量评分是基于匹兹堡睡眠质量指数计算基本原则，通过手表所测得的睡眠规律性、睡眠时长、深睡眠比例、夜里醒来次数和醒来时间等因子来评估睡眠质量并进行评分。")
                            .font(.system(size: 14))
                            .foregroundStyle(.white)
                            .lineLimit(10)
                    }
                    .padding(.bottom,20)
                    .padding(.horizontal,20)
                }
                .background(Color(hex: "#1E1E1E"))
                .cornerRadius(16, corners:[.topLeft,.topRight,.bottomLeft,.bottomRight])
                .padding(.horizontal,12)
                Spacer()
            }
            Spacer()
        }
        .navigationBarHidden(true)
        .background(Color(hex: "#0A0A0A"))
        .edgesIgnoringSafeArea(.all)
    }
}

#Preview {
    SleepQualityDetailView()
}
